<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js"></script>
		<title>vue第一个程序</title>
		<style>
			
			.errClass{
				background-color: yellow;
				color: red;
			}
			.activeClass{
				background-color: royalblue;
				color: white;
			}
		</style>
	</head>
	<body>
			
		<div id="app">
			<!-- v-bind 属性绑定-->
			<h1 v-bind:title="message">我的vue程序</h1>
			<br />
			<button v-bind:disabled="show">{{message}}</button>
			<button v-once>{{message}}</button>
			<br />
			
			<!-- v-model 数据双向动态绑定-->
			<input v-model="inputdata" placeholder="edit me">
			<p>{{inputdata}}</p>
			
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		    <label for="jack">Jack</label>
		    <input type="checkbox" id="john" value="John" v-model="checkedNames">
		    <label for="john">John</label>
		    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		    <label for="mike">Mike</label>
		    <br>
		    <span>Checked names: {{ checkedNames }}</span>
			<br />
			<br />
			
			<!-- v-on 事件绑定-->
			<button v-on:click="showinfo('你好',$event)">确定</button>
			<button v-on:click.once="showinfo('你好',$event)">确定</button>
			<button v-on:keyup.enter="keyEvent('按键事件',$event)">确定</button>
			
			<!-- v-html html内容显示-->
			<p>{{htmdata}}</p>
			<p v-html="htmdata"></p>
			
			<!-- 流程控制 -->
			<!-- v-for -->
			<table border="1" cellspacing="0" cellpadding="0">
				<caption>用户信息</caption>
				<tr v-for="(user,index) in users">
					<td>{{index}}</td><td>{{user.name}}</td><td>{{user.sex}}</td><td>{{user.age}}</td>
				</tr>
			</table>
			<span v-for="n in 10">{{ n }} </span>
			<!-- v-if -->
			<br />
			<p v-if="casesd">hello</p>
			<p v-else>你好</p>
			
			<!-- 计算属性 -->
			<br />
			<button>{{reverseString}}</button>
			
			<!-- 样式 -->
			<br />
			<button v-bind:class="classObj">样式bindClass</button>
			<button v-bind:style="{color:fontColor,fontSize:fontSize}">样式style</button>
		</div>
		
		
		
	</body>
	<script>

		var app=new Vue({
			el:'#app',
			// 数据
			data:{
				message:"第一个vue程序！",
				inputdata:"",
				checkedNames:[],
				show:false,
				error:false,
				active:true,
				casesd:true,
				fontColor:'rgb(200,0,100)',
				fontSize:'16px',
				users:[
					{name:"何伟",sex:"男",age:"18"},
					{name:"马青青",sex:"女",age:"16"},
					{name:"马龙",sex:"男",age:"30"}
				],
				teachers:[
					{name:"杨萍",sex:"女",age:"18"},
					{name:"田芳",sex:"女",age:"20"},
					{name:"马宁",sex:"女",age:"16"}
				],
				htmdata:"<h2>this is html dom</2>"
			},
			// 用户方法
			methods:{
				showinfo: function(msg,event){
					event.preventDefault();
					console.log(event.target);
					alert(msg);
				},
				keyEvent:function(msg,event){
					console.log(event.target);
					alert(msg+event.keyCode)
				}
			},
			// 侦听器
			watch:{
				message:function(){
					alert("message发生了改变")
				},
				htmdata:function(){
					alert("htmdata发生了改变")
				}
				
			},
			// 计算属性是基于它们的依赖进行缓存的,reverseString依赖于message,
			// 当message发生改变时,计算属性reverseString才会重新计算,而方法每次都从新计算,不缓存
			computed:{
				reverseString:function(){
					return this.message.split('').reverse().join('');
				},
				classObj:function(){
					return {
						activeClass:this.active&&!this.error,
						errClass:this.error&&!this.active
					}
				}
			},
			// vue实例生命周期方法
			created:function() {
				console.log("程序已创建");
			},
			destroyed() {
				console.log("程序已销毁");
			}
		})
		
	</script>
</html>
